// const serialize = require("form-serialize");

/**
 * 目标1：渲染图书列表
 *  1.1 获取数据
 *  1.2 渲染数据
 */
let globalBooks = [];
const creator = '孙金瑶'
let getBooksList = () => {
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        params: {
            //外号：获取对应数据
            creator
        }
    }).then(result => {
        const booksList = result.data.data
        console.log(booksList);
        globalBooks = booksList;
        const strbook = booksList.map((item, index) => {
            return `<tr>
          <td>${index + 1}</td>
          <td>${item.bookname}</td>
          <td>${item.author}</td>
          <td>${item.publisher}</td>
          <td data-id=${item.id}>
            <span class="del">删除</span>
            <span class="edit">编辑</span>
          </td>
        </tr>`
        }).join('')
        document.querySelector('.list').innerHTML = strbook;
    })
}
//网页加载运行 获取并渲染列表一次
getBooksList()


//新增图书
//弹框的显示与隐藏  收集表单数据并提交给服务器  获取数据 渲染数据
//创建弹框对象
const addModalDom = document.querySelector('.add-modal')
const addModal = new bootstrap.Modal(addModalDom)
document.querySelector('.add-btn').addEventListener('click', () => {
    //收集表单数据 并提交到服务器保存
    const addForm = document.querySelector('.add-form')
    const bookObj = serialize(addForm, { hash: true, empty: true })
    // 提交到服务器
    axios({
        url: 'http://hmajax.itheima.net/api/books',
        method: 'POST',
        data: {
            ...bookObj,
            creator
        }
    }).then(result => {
        console.log(result);
        //添加成功后重新请求数据并渲染
        getBooksList()
        //重置表单
        addForm.reset()
        //隐藏弹框
        addModal.hide()
    })

})

//删除图书
//事件委托
document.querySelector('.list').addEventListener('click', e => {
    if (e.target.classList.contains('del')) {
        const theId = e.target.parentNode.dataset.id
        console.log(theId);
        //调用删除接口
        axios({
            url: `http://hmajax.itheima.net/api/books/${theId}`,
            method: 'DELETE'
        }).then(() => {
            getBooksList()
        })
    }
})

//编辑图书

let editModal = ''
let editBookId = '';
document.querySelector('.list').addEventListener('click', (e) => {
    editBookId = e.target.parentNode.dataset.id;
    const ediDom = document.querySelector('.edit-modal');
    editModal = new bootstrap.Modal(ediDom)
    if (e.target.classList.contains('edit')) {
        // 展示弹窗
        editModal.show()
        // 在表单中回显 此行的书本数据
        // 1. 根据 editBookId 在 globalBooks 中找到对应的数
        const currentBook = globalBooks.filter((book) => { return book.id == editBookId })[0];

        // 2. 把 currentBook 对应的数据填入表单中
        const bookNameForm = document.querySelector('.edit-form .bookname')
        bookNameForm.value = currentBook.bookname;
        const authorNameForm = document.querySelector('.edit-form .author')
        authorNameForm.value = currentBook.author;
        const chubanNameForm = document.querySelector('.edit-form .publisher')
        chubanNameForm.value = currentBook.publisher;
    }
})
document.querySelector('.edit-btn').addEventListener('click', (e) => {
    //获取当前编辑图书数据,然后回显到编辑表单中
    const editForm = document.querySelector('.edit-form')
    const bookObj = serialize(editForm, { hash: true, empty: true })
    console.log(bookObj);
    axios({
        url: `http://hmajax.itheima.net/api/books/${editBookId}`,
        method: 'PUT',
        data: {
            ...bookObj,
        }
    }).then(result => {
        editModal.hide();
        getBooksList();
    })

})